<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        #app {
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }
    </style>
</head>
<body>
  <div id="app">
      <div>
          <el-row style="height: 50px;line-height: 50px;background-color: #cccccc">
              <el-col :span="12" :offset="10">
                  <div >
                      欢迎光临蜗牛书城 &nbsp;|&nbsp;
                      <span th:if="${#strings.isEmpty(session.userInfo)}">
                          <a href="">登录</a> | <a href="">注册</a>
                      </span>

                      <span th:if="${!#strings.isEmpty(session.userInfo)}" >
                          &nbsp; <a href="">[[${session.userInfo.username}]]</a>
                      </span>
                      &nbsp;|&nbsp;<a href="">我的订单</a>  &nbsp;|&nbsp;
                      <a href="">我的购物车</a>
                      <span th:if="${!#strings.isEmpty(session.userInfo)}">
                          &nbsp;|&nbsp;<a href="">退出</a>
                      </span>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="20" :offset="2">
                  <div>
                      <el-table
                              :data="cartList"
                              @selection-change="handleSelectionChange"
                              style="width: 100%">
                          <el-table-column
                                  type="selection"
                                  width="60">
                          </el-table-column>
                          <el-table-column
                                  label="封面"
                                  width="180">
                              <template slot-scope="scope">
                                  <el-image
                                          style="width: 100px; height: 100px;cursor: pointer"
                                          src="http://localhost:10001/a.jpg"
                                          fit="cover"></el-image>
                              </template>
                          </el-table-column>
                          <el-table-column
                                  prop="bookVo.bname"
                                  label="图书名称"
                                  width="180">
                          </el-table-column>
                          <el-table-column
                                  prop="bookVo.price"
                                  label="单价"
                                  width="120px">
                          </el-table-column>
                          <el-table-column
                                  label="数量"
                                  width="180px">
                              <template slot-scope="scope">
                                  <el-input-number v-model="scope.row.buycount" @change="handleChange(scope.row.bookVo.id,scope.row.buycount)" size="mini" :min="1" :max="200" label="描述文字"></el-input-number>
                              </template>
                          </el-table-column>
                          <el-table-column
                                  prop="allprice"
                                  label="小计"
                                  width="120px">
                          </el-table-column>
                          <el-table-column label="操作">
                              <template slot-scope="scope">
                                  <el-button
                                          size="mini"
                                          type="danger"
                                          @click="del(scope.row.id)">删除</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                  </div>
              </el-col>
          </el-row>
          <el-row style="margin-top: 30px">
              <el-col :span="6" :offset="16">
                  <div>
                      <span>总价 :{{allPrice}}元</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="danger" @click="cal">结算</el-button>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="12" :offset="6">
                  <div style="text-align: center">
                      版权所有，翻版必究
                  </div>
              </el-col>
          </el-row>
      </div>
  </div>

  <script>
      let vueApp = new Vue({
          el:"#app",
          data:{
              cartList:[
                  {
                      id:1,
                      buycount:10,
                      allprice:100,
                      book:{
                          id:1,
                          bname:'三国演义',
                          price:10
                      }
                  }
              ],
              allPrice:0 ,
              ids:[]
          },
          methods:{
              cal(){
                  if (this.ids.length < 1) {
                      alert("青至少选择一个图书!");
                      return ;
                  }
                  localStorage.setItem("ids",this.ids.join(","));
                  location.href = './cal.html' ;
                  /*let url = './cart/cal';
                  let params = new URLSearchParams();
                  params.append('ids',this.ids);
                  axios.post(url,params).then((res)=>{
                      if (res.data.code == 200) {
                          this.cartList = res.data.data ;
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  })*/
              },
              handleSelectionChange(val){
                  this.ids = [] ;
                  let allPrice = 0;
                  for (let c of val) {
                      allPrice += c.allprice
                      this.ids.push(c.id);
                  }
                  this.allPrice = allPrice ;
              },
              del(id){
                  if (confirm('确认要删除吗？')){
                      let url = './cart/del/'+id;
                      axios.delete(url).then((res)=>{
                          if (res.data.code == 200) {
                              this.cartList = res.data.data ;
                          }else {
                              this.$message({
                                  type:'error',
                                  message:res.data.msg,
                                  duration:1000
                              })
                          }
                      })
                  }
              },
              handleChange(id,num){
                 console.log(id,num);
                 let url = './cart/modifyCart';
                 axios.get(url,{
                     params:{
                         bookId:id,
                         num:num
                     }
                 }).then((res)=>{
                     if (res.data.code == 200) {
                         this.cartList = res.data.data ;
                     }else {
                         this.$message({
                             type:'error',
                             message:res.data.msg,
                             duration:1000
                         })
                     }
                 })

              },
              initMyCart(){
                  let url = "./cart/myCart";
                  axios.get(url)
                  .then((res)=>{
                      if (res.data.code == 200) {
                          this.cartList = res.data.data ;
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:1000
                          })
                      }
                  })
              }
          },
          created(){
              this.initMyCart();
          }
      })
  </script>

</body>
</html>